<template>
  <common-card title="今日交易用户数" :value="orderUser|numberFormat">
    <template #chart>
      <v-chart :option="getOption()" autoresize/>
    </template>
    
    <template #bottom>
      <span>退货率</span>
      <span class="number">{{returnRate}}%</span>
    </template>
  </common-card>
</template>

<script>
/* 
  "orderUser": 182425,
  "returnRate": 5.91,
  "orderUserTrend": [410, 82, 200, 334, 390, 330, 220, 150, 82, 200, 134, 290, 330, 150],
  "orderUserTrendAxis": ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00"],
  
*/
import {mapState} from 'vuex'
export default {
  name: 'TodayUsers',

  computed: {
    ...mapState({
      orderUser: state => state.data.reportData.orderUser,
      returnRate: state => state.data.reportData.returnRate,
      orderUserTrend: state => state.data.reportData.orderUserTrend || [],
      orderUserTrendAxis: state => state.data.reportData.orderUserTrendAxis || [],
    })
  },

  methods: {
    getOption () {
      return {
        xAxis: {
          show: false,
          data: this.orderUserTrendAxis
        },
        yAxis: {
          show: false,
        },
        series: [
          {
            name: '实时交易量',
            type: 'bar',
            data: this.orderUserTrend,
            barWidth: '50%',
            itemStyle: {
              color: '#389BDC'
            }
          }
        ],
        tooltip: {
          // trigger: 'item'
        },
        grid: {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0
        },

        // color: '#389BDC'
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
